<template>
  <div class="equipmentManage-box">
    <div class="clear-equipmemtRepair">
        <el-button type="danger" icon="el-icon-delete" @click="updateEquipmentStateOverTime"  round>更新报废设备状态</el-button>
    </div>
    <div class="search-box">
        <el-input
            style="width:240px"
            placeholder="请输入设备名"
            v-model="selectParam.equipmentName"
            clearable>
        </el-input>
        &nbsp;&nbsp;
        <el-select v-model="selectParam.roomId" placeholder="请选择教室号">
            <el-option
            label="无选择"
            value=""
            >
            </el-option>
            <el-option
            v-for="item in roomList"
            :key="item.id"
            :label="item.roomNo"
            :value="item.id">
            </el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-button type="primary" icon="el-icon-search" @click="selectEquipmentList">搜索</el-button>
    </div>
    <div style="margin-top: 20px;margin-left: 5%;">
        <el-button @click="toggleSelection()" icon="el-icon-close">取消选择</el-button>
        <el-button @click="createFormVisible=true" icon="el-icon-plus" type="primary">新增设备</el-button>
        <el-button @click="alertEquipmentShow" icon="el-icon-edit" type="warning">更新设备信息</el-button>
        <el-button @click="deleteEquipmentByIds" icon="el-icon-delete" type="danger">删除设备</el-button>
    </div>
    <div class="equipment-list-box">
        <el-table
            ref="multipleTable"
            :data="equipmentList"
            tooltip-effect="dark"
            :default-sort = "{prop: 'equno', order: ' ascending'}"
            style="width: 100%;"
            @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand" style="margin-left:80px">
                        <el-form-item label="设备标识号">
                            <span>{{ props.row.id }}</span>
                        </el-form-item>
                        <el-form-item label="设备号">
                            <span>{{ props.row.equno }}</span>
                        </el-form-item>
                        <el-form-item label="设备名">
                            <span>{{ props.row.equname }}</span>
                        </el-form-item>
                        <el-form-item label="设备状态">
                            <span :class="props.row.equstate==='1'?'normal-text':'unormal-text'">{{ props.row.equstate==='1'?'正常':'异常' }}</span>
                        </el-form-item>
                        <el-form-item label="入库时间">
                            <span>{{ props.row.createtime }}</span>
                        </el-form-item>
                        <el-form-item label="所属房间">
                            <span>{{ props.row.roomno }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
            label="设备标识号"
            width="400">
            <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
            prop="equno"
            label="设备号"
            sortable
            width="120">
            </el-table-column>
            <el-table-column
            prop="equname"
            label="设备名"
            width="200"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="roomno"
            label="所属教室"
            width="200"
            sortable
            show-overflow-tooltip>
            </el-table-column>
        </el-table>
    </div>
    <div class="pagination-box">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageParams.currentPage"
            :page-sizes="[5, 10, 15]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="equipmentListRows"
            >

            </el-pagination>
    </div>
    <el-dialog title="新增设备" :visible.sync="createFormVisible">
        <el-form>
            <el-form-item label="设备名" :label-width="formLabelWidth">
            <el-input placeholder="例:笔记本" clearable v-model="equipmentObj.equname"></el-input>
            </el-form-item>
            <el-form-item label="教室号" :label-width="formLabelWidth">
            <el-select v-model="equipmentObj.roomid" placeholder="请选择教室号">
                <el-option
                v-for="item in roomList"
                :key="item.id"
                :label="item.roomNo"
                :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="createFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="createEquipment">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="修改设备信息" :visible.sync="alertFormVisible">
        <el-form>
            <el-form-item label="设备名" :label-width="formLabelWidth">
            <el-input clearable v-model="equipmentObj.equname"></el-input>
            </el-form-item>
            <el-form-item label="教室号" :label-width="formLabelWidth">
            <el-select v-model="equipmentObj.roomid" ref="alertEquipmentSelect" placeholder="请选择教室号">
                <el-option
                v-for="item in roomList"
                :key="item.id"
                :label="item.roomNo"
                :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="alertFormVisible = false;toggleSelection();">取 消</el-button>
            <el-button plain type="primary" @click="alertEquipmentById">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import $ from 'jquery';
import {v4 as uuidv4} from 'uuid';
import { mapState } from 'vuex';
export default {
    name:'equipmentManage',
    data(){
        return{
            createFormVisible:false,
            alertFormVisible:false,
            multipleSelection: [],
            formLabelWidth: '120px',
            pageParams:{
                currentPage:1,
                pageSize:5
            },
            selectParam:{
                equipmentName:'',
                roomId:''
            },
            equipmentObj:{
                id:'',
                createtime:'',
                equname:'',
                roomid:'',
                roomno:''
            }
        }
    },
    computed:{
        ...mapState('equipmentRepair',['roomList']),
        ...mapState('_equipment',['equipmentList','equipmentListRows'])
    },
    methods:{
        toggleSelection(rows) {
            if (rows) {
            rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
            });
            } else {
            this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSizeChange(val) {
            this.pageParams.pageSize=val;
            //分页查询
            let obj=Object.assign(this.selectParam,this.pageParams);
            this.$store.dispatch("_equipment/getEquipmentByCondition",obj)
        },
        handleCurrentChange(val) {
            this.pageParams.currentPage=val;
            //分页查询
            let obj=Object.assign(this.selectParam,this.pageParams);
            this.$store.dispatch("_equipment/getEquipmentByCondition",obj)
        },
        selectEquipmentList(){
            let obj=Object.assign(this.selectParam,this.pageParams)
            //提交查询
            this.$store.dispatch("_equipment/getEquipmentByCondition",obj)
        },
        updateEquipmentStateOverTime(){
            //一键更新达到报废标准设备状态
            let nowTime=this.dayjs().subtract(1000,"d").format("YYYY-MM-DD HH:mm:ss");
            //入库时间>1000天
            this.$confirm('此操作会将'+nowTime+'前入库设备状态将更新为“异常”, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.$store.dispatch("_equipment/updateEquipmentStateByNowTime",{'nowTime':nowTime})
            this.$message({
                type: 'success',
                message: '正在更新...'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });          
            });
        },
        createEquipment(){
            if(this.equipmentObj.equname===''||this.equipmentObj.roomid===''){
                this.$notify({
                    title: '警告',
                    message: '请检查输入是否存在空缺',
                    type: 'warning'
                });
                return;
            }
            this.equipmentObj.id=uuidv4().slice(0,-4);
            this.equipmentObj.createtime=this.dayjs().format("YYYY-MM-DD HH:mm:ss");
            this.$store.dispatch("_equipment/createEquipment",this.equipmentObj);
            this.createFormVisible=false;
        },
        alertEquipmentShow(){
            if(this.multipleSelection.length!=1){
                this.$notify({
                    title: '警告',
                    message: '您只能选择一条记录修改',
                    type: 'warning'
                });
                return; 
            }
            this.equipmentObj.id=this.multipleSelection[0].id;
            this.equipmentObj.equname=this.multipleSelection[0].equname;
            this.equipmentObj.roomid=this.multipleSelection[0].roomid;
            this.alertFormVisible=true;
        },
        alertEquipmentById(){
            if(this.equipmentObj.equname===''||this.equipmentObj.roomid===''){
                this.$notify({
                    title: '警告',
                    message: '请检查输入是否存在空缺',
                    type: 'warning'
                });
                return;
            }
            //更新记录
            this.equipmentObj.createtime=this.dayjs().format("YYYY-MM-DD HH:mm:ss");
            this.equipmentObj.roomno=this.$refs.alertEquipmentSelect.selected.label
            this.$store.dispatch("_equipment/updateEquipmentById",this.equipmentObj);
            this.alertFormVisible=false;
            this.toggleSelection();
        },
        deleteEquipmentByIds(){
            if(this.multipleSelection.length===0){
                this.$notify({
                    title: '警告',
                    message: '您必须选择记录删除',
                    type: 'warning'
                });
                return; 
            }
            this.$confirm('此操作将删除设备记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                let arr=[];
                console.log(this.multipleSelection.length)
                $.each(this.multipleSelection,function(index,item){
                    arr.push(item.id)
                })
                this.$store.dispatch("_equipment/deleteEquipmentByIds",arr);
                this.toggleSelection();
            this.$message({
                type: 'success',
                message: '正在删除...'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });   
            this.toggleSelection();       
            });
        }
    },
    mounted(){
        this.$store.dispatch("equipmentRepair/getRoomListByCreateRepair")
        let obj=Object.assign(this.selectParam,this.pageParams);
        this.$store.dispatch("_equipment/getEquipmentByCondition",obj)
    }
}
</script>

<style scoped lang="css">
    .clear-equipmemtRepair{
            position: inherit;
            top: 10px;
            right: 10px;
    }
    .equipmentManage-box{
        position:inherit;
        top:0;
        height:100%;
        left:0;
        width:100%;
        overflow: auto;
    }
    .search-box{
        margin-top: 2%;
        margin-left: 5%;
        height: 7%;    
        width:90%;    
    }
    .equipment-list-box{
        position: inherit;
        margin-top: 2%;
        left: 5%;
        width:85%;
        height: 60%;
        overflow: auto;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .pagination-box{
        position: inherit;
        top: 90%;
        width: 100%;
        text-align: center;
    }
    .normal-text{
        color: black;
    }
    .unormal-text{
        color: red;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>